All files / src/lib glassmorphism.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * Glassmorphism Utility Classes
 * Provides consistent glassmorphism styles across the application
 */
 
export const glassClasses = {
  // Modals and dialogs - backdrop-blur-md
  modal: 'bg-slate-900/95 backdrop-blur-md border border-slate-700/50',
  
  // Cards y Contenedores - backdrop-blur-sm
  card: 'bg-slate-800/30 backdrop-blur-sm border border-slate-700/50',
  
  // Headers and navigation - backdrop-blur-md
  header: 'bg-slate-900/80 backdrop-blur-md border-b border-slate-700/50',
  
  // Overlays y Fondos - backdrop-blur-sm
  overlay: 'bg-black/60 backdrop-blur-sm',
  
  // Elementos Flotantes - backdrop-blur-md
  floating: 'bg-slate-800/50 backdrop-blur-md border border-slate-700/30',
  
  // Variantes adicionales
  cardDark: 'bg-slate-900/50 backdrop-blur-sm border border-slate-700/50',
  cardLight: 'bg-slate-700/30 backdrop-blur-sm border border-slate-600/50',
  
  // Para elementos interactivos
  cardHover: 'bg-slate-800/30 backdrop-blur-sm border border-slate-700/50 hover:bg-slate-700/50 transition-all duration-200',
  
  // Para sidebars
  sidebar: 'bg-slate-900/90 backdrop-blur-md border-r border-slate-700/50',
  
  // Para dropdowns
  dropdown: 'bg-slate-900/95 backdrop-blur-md border border-slate-700/50 shadow-xl',
  
  // Para tooltips
  tooltip: 'bg-slate-900/90 backdrop-blur-sm border border-slate-700/50'} as const;
 
/**
 * Get glassmorphism class by type
 */
export function getGlassClass(type: keyof typeof glassClasses): string {
  return glassClasses[type];
}
 
/**
 * Combine glassmorphism class with custom classes
 */
export function withGlass(type: keyof typeof glassClasses, customClasses?: string): string {
  return `${glassClasses[type]} ${customClasses || ''}`.trim();
}
 
/**
 * Check if element should use glassmorphism based on context
 */
export function shouldUseGlass(_context: 'modal' | 'card' | 'header' | 'overlay' | 'floating'): boolean {
  // Could add logic here to disable glassmorphism on low-end devices
  // For now, always return true
  return true;
}
 
/**
 * Get appropriate text color for glassmorphism backgrounds
 */
export function getGlassTextColor(type: keyof typeof glassClasses): string {
  switch (type) {
    case 'modal':
    case 'header':
    case 'sidebar':
    case 'dropdown':
      return 'text-white';
    case 'card':
    case 'cardDark':
    case 'cardLight':
    case 'cardHover':
    case 'floating':
    case 'tooltip':
      return 'text-slate-100';
    case 'overlay':
      return 'text-white';
    default:
      return 'text-white';
  }
}
 
/**
 * Get appropriate secondary text color for glassmorphism backgrounds
 */
export function getGlassSecondaryTextColor(type: keyof typeof glassClasses): string {
  switch (type) {
    case 'modal':
    case 'header':
    case 'sidebar':
    case 'dropdown':
      return 'text-slate-300';
    case 'card':
    case 'cardDark':
    case 'cardLight':
    case 'cardHover':
    case 'floating':
    case 'tooltip':
      return 'text-slate-400';
    case 'overlay':
      return 'text-slate-200';
    default:
      return 'text-slate-300';
  }
}
 
export function generateGlassGradient(_context: CanvasRenderingContext2D, _width: number, _height: number) {
  // Implementation details omitted for brevity
  // This function is a placeholder for the actual implementation
  // which would use the context to generate a gradient
  // For now, it just returns a string
  return `linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 100%)`;
}